<template>
    <view class="container" @click.self="closeShare">
        <view class="share-content">
            <view class="title">分享</view>
            <view class="share-btns" data-flex="box:mean">
                <view class="btn" @click="shareWx">
                    <img src="../../static/langwen/wechat.png" alt="">
                    <view>微信</view>
                </view>
                <view class="btn" @click="sharePyq">
                    <img src="../../static/langwen/wechat_circle.png" alt="">
                    <view>朋友圈</view>
                </view>
                <view @click="shareClass" class="btn">
                    <img src="../../static/langwen/class.png" alt="">
                    <view>班级</view>
                </view>
            </view>
            <view class="cancle" @click="closeShare">取消</view>
        </view>
    </view>
</template>

<script>
import Api from '@/common/api'
export default {
    props: ['id'],
    methods: {
        closeShare() {
            // 关闭分享窗口
            this.$emit('close-share');
        },
        shareClass() {
            // 分享到班级
            var param = {
                id: this.id
            }
            uni.navigateTo({
                url: `../../pages/langwen/shareClass?param=${encodeURIComponent(JSON.stringify(param))}`
            });
        },
        async shareWx() {
            // 分享到微信
            return;
            var params = {
                'id': this.id
            };
            var data = await Api.apiCall('get', Api.sort.shareWx, params);
        },
        async sharePyq() {
            // 分享到朋友圈
            return;
            var params = {
                'id': this.id
            };
            var data = await Api.apiCall('get', Api.sort.sharePyq, params);
        }
    }
}
</script>

<style lang="less">
    .share-btns {
        height: 212rpx;
        padding: 40rpx 0;
        .btn {
            text-align: center;
            color: #7F818D;
            font-size: 24rpx;
            img {
                display: block;
                margin: 0 auto;
                width: 88rpx;
                height: 88rpx;
            }
            view {
                margin-top: 10rpx;
                line-height: 36rpx;
            }
        }
    }
    .cancle {
        border-top: 20rpx solid #F5F5F5;
        line-height: 88rpx;
        text-align: center;
        height: 88rpx;
        color: #3F4046;
        font-size:32rpx;
    }
    .container {
    	z-index: 999;
    	position: fixed;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background:rgba(0,0,0,0.49);
    }
    .share-content {
        z-index: 1000;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        height: 394rpx;
        border-radius: 20rpx 20rpx 0px 0px;
        background-color: #fff;
        .title {
            color: #7F818D;
            font-size: 32rpx;
            text-align: center;
            line-height: 44rpx;
            padding-top: 30rpx;
        }
    }
</style>
